<template>
	<el-row :gutter="24">
		<el-col :sm="18" :md="16">
		<el-form-item :label="field.description" v-if="field.original_type == type">
			<el-input 
				v-if="field.type == 'text'" 
				v-model="value[fieldName]" 
				type="input"
				:autosize="{ minRows: 2, maxRows: 6 }" 
				:rows="2" 
				:disabled="disabled">
			</el-input>
			<el-input
				v-else-if="field.type == 'textarea'"
				v-model="value[fieldName]" 
				type="textarea"
				:autosize="{ minRows: 2, maxRows: 6 }"
				:rows="2" 
				:disabled="disabled">
			</el-input>
			<el-checkbox-group v-model="value[fieldName]" v-else-if="field.type == 'checkbox'">
				<el-checkbox :label="item.slug" v-for="(item, index) in field.options" :key="index" @click.native="onClick">{{item.name}}</el-checkbox>
			</el-checkbox-group>
			<!-- <el-col :sm="12" v-else-if="field.type == 'image'" class="image-selector">
				
			</el-col> -->
			<wt-image-selector v-else-if="field.type == 'image'" class="image-selector" :value="value[fieldName]" @input="formatValue" :class="{'disabled':field.editable == '0'}" 
					:multiple="false" action="article/upload"
			></wt-image-selector>
			<el-input :value="value[fieldName]" v-if="field.type == 'image'"></el-input>
			<el-col :sm="12" v-if="field.comment && field.type == 'image'" class="image-tip">
				<el-alert
					:title="field.comment"
					type="info">
				</el-alert>
			</el-col>
		</el-form-item>
		</el-col>
		<el-col :sm="6" :md="8">
		<el-alert
			v-if="field.comment  && field.type != 'image'&&(field.original_type == type)"
			:title="field.comment"
			type="info">
		</el-alert>
		</el-col>
	</el-row>
</template>
<script>
	import imageUpload from 'winged/components/wt-image-selector'
	import utils from 'winged/utils/utils.js'
	export default{
		props:{
			type:{
				type:String,
				default:'input'//textarea,input,image...
			},
			field:{
				type:Object,
				default:function(){
					return {}
				}
			},
			value:{
				type:[String,Object,Array],
				default:function(){
					return {}
				}
			},
			fieldName:{
				type:[String,Object,Array],
				default:function(){
					return {}
				}
			},
			canEditAll:{
				type:Boolean,
				default:false
			},
			type:{
				type:Number,
				default:0
			}
		},
		data(){
			return{
				// Value:this.values[this.values.department+'#'+this.field.name],
			}
		},
		computed:{
			disabled:function(){
				return this.field.editable == 0 && !this.canEditAll
			}
		},
		components:{
			[[imageUpload.name]]:imageUpload,
		},
		methods:{
			formatValue:function(val){
				this.value[this.fieldName] = val[0].replace('http:','')
			},
			onClick:function(){
				console.log('field',this.value)
			},
			builder:function(val){
				if(this.field.type == 'checkbox'){
					for(let i in val){
						this.value[this.value.department + '#' + this.field.name] = utils.tryJsonParse(this.value[this.value.department + '#' + this.field.name],true)
					}
				}
				if(this.field.type == 'image'){
					for(let i in val){
						let parsedVal = utils.tryJsonParse(this.value[this.value.department + '#' + this.field.name],true)
						if(typeof(parsedVal) == 'string'){
							this.value[this.value.department + '#' + this.field.name] = parsedVal
						}else{
							this.value[this.value.department + '#' + this.field.name] = parsedVal[0]
						}	
					}
				}
				
			}
		},
		created(){
			this.builder(this.value)
		}
	}
</script>
<style lang="less">
	.disabled{
		pointer-events:0ne;
	}
	.image-selector{
		margin-bottom:10px;
		float:left;
	}
	.image-selector,
	.image-tip{
		min-width:178px;
	}
	.image-tip{
		padding-left:0!important;
	}
	
	.el-alert__content{
		padding-right:20px;
	}

	.el-checkbox{
		margin-left:0!important;
		margin-right:15px;
	}

	// .el-col{
	// 	width:auto!important;	
	// }
</style>